import type { ReactElement } from 'react';
import { createElement } from 'react';

interface IconConfig {
	color?: string;
	fontSize?: number;
	icon?: string;
	localIcon?: string;
}
interface Props {
	className?: string;
	icon?: string;
	localIcon?: string;
	style?: React.CSSProperties;
}

export default function useSvgIconRender(
	SvgIcon: ({ className, icon, localIcon, style }: Props) => ReactElement
) {
	type IconStyle = Partial<Pick<CSSStyleDeclaration, 'color' | 'fontSize'>>;

	const SvgIconVNode = (config: IconConfig) => {
		const { color, fontSize, icon, localIcon } = config;

		const style: IconStyle = {};

		if (color) {
			style.color = color;
		}
		if (fontSize) {
			style.fontSize = `${fontSize}px`;
		}

		if (!icon && !localIcon) {
			return null;
		}

		return createElement(SvgIcon, { icon, localIcon, style });
	};

	return {
		SvgIconVNode
	};
}
